<template>
  <div class="wrap" v-if="orderData && orderData.order">
    <div class="order-detail-layout box-width container">
      <div class="info clearfix">
        <div class="item">
          <div class="label">Alamo订单号</div>
          <div class="description">{{orderData.order.alamo_code}}</div>
        </div>
        <div class="item">
          <div class="label">订单编号</div>
          <div class="description">{{orderData.order.code}}</div>
        </div>
        <div class="item">
          <div class="label">套餐名称</div>
          <div class="description">{{orderData.setCategory.chinese_name}}</div>
        </div>
        <div class="item">
          <div class="label">付款类型</div>
          <div class="description">{{orderData.order.type_desc}}</div>
        </div>
        <div class="item">
          <div class="label">支付状态</div>
          <div class="description">{{orderData.order.pay_status_desc}}</div>
        </div>
        <div class="item">
          <div class="label">建立时间</div>
          <div class="description">{{orderData.order.create_time}}</div>
        </div>
        <div class="item">
          <div class="label">付款时间</div>
          <div class="description">{{orderData.order.pay_time}}</div>
        </div>
        <div class="item">
          <div class="label">付款期限</div>
          <div class="description">{{orderData.order.pay_end_date}}</div>
        </div>
        <div class="item">
          <div class="label">取消期限</div>
          <div class="description">{{orderData.order.cancel_end_date}}</div>
        </div>
      </div>
      <div class="detail">
        <div class="order-location clearfix">
          <div class="item text-left" style="margin-bottom: 15px;">
            <div style="font-weight: bold;width: 22%; display: inline-block; margin-left: 17%;">时间</div>
            <div style="font-weight: bold;width: 22%; display: inline-block; margin-left: 22.5%;">地点</div>
          </div>
          <div class="item">
            <span class="text-right" style="font-size: 14px; display: inline-block; width: 15.5%; margin: 0; font-weight: bold;">取车：</span>
            <span style="font-size: 14px; display: inline-block; width: 43%;">{{orderData.order.pickup_date}}</span>
            <span style="font-size: 14px; display: inline-block; width: 35%;">{{orderData.pickupLocation.name}}</span>
          </div>
          <div class="item">
            <span class="text-right" style="font-size: 14px; display: inline-block; width: 15.5%; margin: 0; font-weight: bold;">还车：</span>
            <span style="font-size: 14px; display: inline-block; width: 43%;">{{orderData.order.return_date}}</span>
            <span style="font-size: 14px; display: inline-block; width: 35%;">{{orderData.returnLocation.name}}</span>
          </div>
        </div>
        <div class="car-description" style="background: #fff;">
          <div class="img-cover" style="margin: 0 5%;">
            <img :src="orderData.order.vehicle_picture">
          </div>
          <div class="description">
            <div class="title">{{orderData.order.vehicle_brand}}</div>
            <div class="subtitle">{{orderData.carInfo.model_code_class_desc}}/ {{orderData.carInfo.category_code_desc}}/ {{orderData.carInfo.transmission_type === 'MANUAL' ? '手动' : '自动'}}/ {{orderData.carInfo.baggage_quantity}}件行李/ {{orderData.carInfo.passenger_quantity}}座位/ {{orderData.carInfo.air_condition_in ? '含空调' : '不含空调'}}/ {{orderData.carInfo.model_code_type === 'B' ? '2门' : orderData.carInfo.model_code_type === 'C' ? '2或4门' : '4门或5门'}}</div>
            <div class="price-box">
              <a href="javascript:void(0);" class="price-item" v-if="orderData.order.type === 'ARRIVEPAY'">
                <div class="title">官方零售价：</div>
                <div class="price">{{orderData.exchangeRate.currency_symbol + (orderData.order.retail_amount/100).toFixed(2)}}</div>
              </a>
              <a href="javascript:void(0);" class="price-item" v-if="orderData.order.type === 'PREPAY'">
                <div class="title">官方零售价：</div>
                <div class="price">{{'￥' + Math.ceil(orderData.order.retail_amount/100) + '.00'}}</div>
              </a>
              <a href="javascript:void(0);" class="price-item" v-if="orderData.order.type === 'ARRIVEPAY'">
                <div class="title">返佣：</div>
                <div class="price color-brown">{{orderData.exchangeRate.currency_symbol + (orderData.order.agent_commission).toFixed(2)}}</div>
              </a>
              <a href="javascript:void(0);" class="price-item" v-if="orderData.order.type === 'PREPAY'">
                <div class="title">{{orderData.set.pay_type === 'FLOAT_PREPAY' ? '浮动' : '常规'}}价：</div>
                <div class="price color-brown">{{'￥' + Math.ceil(orderData.order.cny_pay_price) + '.00'}}</div>
              </a>
            </div>
          </div>
        </div>
        <div class="order-block-title">价格包含</div>
        <div class="item-control">
          <span class="option" v-for="i in orderData.include" :key="i.id"><i class="iconfont icon-check"></i>{{i.description}}</span>
          <span class="option" v-for="(val, name, index) in orderData.set.content_map" :key="index" v-if="orderData.set.content_map"><i class="iconfont icon-check"></i>{{val}}</span>
        </div>
        <div class="order-block-title">价格不含</div>
        <div class="">
          <p class="font-blod no-margin">以下费用不计入总价，需在门店另行支付</p>
          <div v-for="ui in orderData.unInclude" :key="ui.id">
            <i class="iconfont icon-wrong" style="margin-right: 5px;color: #d81e06; font-size: 24px; vertical-align: middle;"></i>{{ui.description}} ( {{ui.amount}} )
          </div>
        </div>
        <div class="order-block-title">增值服务</div>
        <div>
          <p class="font-blod no-margin"> 以下费用不计入总价，需在门店另行支付</p>
          <div class="item-control" v-if="orderData.equipments">
            <span class="option" :key="e.id" v-for="e in orderData.equipments"><i class="iconfont icon-check"></i>{{e.special_equipment.chinese_name}} （{{e.other_price}}）</span>
          </div>
        </div>
        <div class="order-block-title">主驾员信息</div>
        <div class="driver-info">
          <span>姓氏(拼音):&nbsp;&nbsp;{{orderData.order.customer_perfix}}</span>
          <span>名字(拼音):&nbsp;&nbsp;{{orderData.order.customer_name}}</span>
          <span>电邮:&nbsp;&nbsp;{{orderData.order.customer_email}}</span>
          <span>年龄:&nbsp;&nbsp;{{orderData.customerInfo.age}}</span>
          <span>航班编号:&nbsp;&nbsp;{{orderData.customerInfo.flight_number}}</span>
        </div>
        <div class="col-12 text-center" style="margin-top: 20px;">
          <a :href="orderData.order.pdf_url" v-if="this.orderData.order.pdf_url && !(this.orderData.order.pay_status === 'UNPAID' && this.orderData.order.type === 'PREPAY') && (this.orderData.order.status === 'PAID' || this.orderData.order.status === 'UNPAID' || this.orderData.order.status === 'STAYING')" download  class="btn ft-btn order-btn" style="width: 120px; margin-right: 10px;">下载确认单</a>
          <a @click="goBack(-1)" class="btn ft-btn order-btn" style="width: 120px; color: #fff;">返回</a>
          <b-button @click="cancelOrderConfim" v-if="this.orderData.order.could_cancel_order" class="btn ft-btn order-btn" style="width: 120px;background-color: #17a2b8; margin-left: 10px;">取消订单</b-button>

        </div>
      </div>
    </div>
    <div class="modal fade in" id="pay-modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="price"><span>￥</span>433.20</div>
            <div class="pay-type">
              <div class=""><input ></div>
            </div>
            <div class="pay-type"></div>
            <div class="pay-type"></div>
            <div class="pay-type"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</template>
<script src="./order-detail.js"></script>
